<template>
  <div class="h-full">
    <ul class="mx-auto mt-12 tips" label-width="120px" :model="form">
      <li>
        {{ `${translateTitle('Dams.HSM.支持Excel格式上传工资单')},${translateTitle('Dams.HSM.列数不限')},${translateTitle('Dams.HSM.建议包含')}:` }}
        <span>{{ `${translateTitle('Dams.HSM.姓名')}、${translateTitle('Dams.HSM.手机号')}、${translateTitle('Dams.HSM.实发工资')}` }}</span>
        {{ translateTitle('Dams.HSM.数据项') }}
      </li>
      <li>
        {{
          `${translateTitle('Dams.HSM.可以选择或自定义发薪类型便于对工资条进行备注')},${translateTitle('Dams.HSM.比如')}:${translateTitle(
            'Dams.HSM.发的是什么'
          )},${translateTitle('Dams.HSM.发给哪个部门')}`
        }}
      </li>
    </ul>
    <el-form ref="form" class="w-4/5 mx-auto mt-12 flex flex-wrap" label-width="120px" :model="form" :rules="rules">
      <el-form-item class="form-item" :label="translateTitle('Dams.HSM.发薪月份')" prop="month">
        <el-date-picker
          v-model="form.month"
          :editable="false"
          format="YYYY-MM"
          :placeholder="translateTitle('Dams.HSM.请选择月份')"
          type="month"
          value-format="YYYY-MM"
        />
      </el-form-item>
      <el-form-item class="form-item" :label="translateTitle('Dams.HSM.发薪类型')" prop="salaryType">
        <el-select v-model="form.salaryType" :placeholder="translateTitle('Dams.HSM.请选择')">
          <el-option v-for="(item, index) in salaryOptions" :key="index" :label="item.title" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item class="form-item" :label="translateTitle('Dams.HSM.发薪标题')" prop="title">
        <el-input v-model="form.title" :placeholder="translateTitle('Dams.HSM.请输入标题')" style="width: 220px" />
      </el-form-item>
      <el-form-item class="form-item" :label="translateTitle('Dams.HSM.数据从第')">
        <el-input-number v-model.number="form.number" :max="20" :min="1" />
        {{ translateTitle('Dams.HSM.行开始') }}
      </el-form-item>
      <el-form-item class="font-bold" :label="translateTitle('Dams.HSM.导入工资表')">
        <div class="check-card">
          <p>{{ `${translateTitle('Dams.HSM.直接上传日常使用的工资表')}(EXCEL,CSV),${translateTitle('Dams.HSM.根据所选匹配方式进行校验')}` }}</p>
          <el-radio-group v-model="form.matchingType" class="ml-4">
            <el-radio :label="1" size="large">{{ translateTitle('Dams.HSM.员工手机号匹配') }}</el-radio>
            <el-radio :label="2" size="large">{{ translateTitle('Dams.HSM.员工工号匹配') }}</el-radio>
          </el-radio-group>
          <vui-upload
            ref="fileUploadRef"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :auto-upload="true"
            :file-name="uploadOptions.name"
            :limit="1"
            :multiple="false"
            :post-data="uploadOptions.postData"
            :show-file-list="true"
            style="margin-left: 12px"
            :url="uploadOptions.url"
            @uploadSuccess="uploadSuccess"
          >
            <el-button type="primary">{{ translateTitle('Dams.HSM.上传日常薪资表') }}</el-button>
          </vui-upload>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { GFCD } from '@/utils/utils'
  import { mapGetters } from 'vuex'
  import { setStorage } from '@/utils/tools'
  const configSetting = GFCD('hsm')
  export default {
    name: 'Step1',
    emits: ['changeActive'],
    data() {
      return {
        // 当前步骤
        form: {
          salaryType: translateTitle('Dams.HSM.薪资'),
          month: null,
          title: translateTitle('Dams.HSM.工资单'),
          number: 2,
          matchingType: 1,
          fileName: '',
        },
        salaryOptions: [translateTitle('Dams.HSM.薪资'), translateTitle('Dams.HSM.奖金')],
        uploadOptions: {
          name: 'uploadFile',
          postData: {
            method: 'hsm.upload.excel.read',
            data: {},
          },
          url: `${configSetting.domain}${configSetting.baseUrl}`,
        },
        rules: {
          month: { required: true, message: translateTitle('Dams.HSM.请选择发薪月份'), trigger: 'blur' },
          salaryType: { required: true, message: translateTitle('Dams.HSM.请选择发薪类型'), trigger: 'blur' },
          title: { required: true, message: translateTitle('Dams.HSM.输入发薪标题'), trigger: 'blur' },
        },
      }
    },
    computed: {
      ...mapGetters('payStep', ['excelData']),
    },
    methods: {
      translateTitle,
      // 上传成功
      uploadSuccess(file) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.fileName = file.file.name
            let res = file.fileList[0].response
            setStorage('tableConfig', this.form)
            setStorage('excelData', res.data)
            this.$message({
              type: res.msg.split('{')[1].split('}')[0],
              message: translateTitle('Dams.HSM.上传成功'),
            })
            this.$emit('changeActive', 2)
          } else {
            this.$message({
              type: 'error',
              message: translateTitle('Dams.HSM.请检查是否填写完所有项目'),
            })
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .base-color {
    color: #6ab8b8;
  }

  .tips {
    line-height: 2;
    width: 70%;
    li::before {
      content: '\2022';
      color: #ff943e;
      margin-right: 10px;
    }
    span {
      color: #ff943e;
    }
  }
  .w90 {
    width: 90%;
  }
  .form-item {
    width: 50%;
    font-weight: bold;
  }
  .check-card {
    border: 1px solid #d7d7d7;
    font-weight: normal;
    padding: 10px;
  }
  .form-item {
    :deep(.el-date-editor) {
      width: var(--el-date-editor-width);
    }
  }
  .el-form-item--small.el-form-item {
    width: 50%;
    margin-bottom: 18px;
  }
</style>
